<template>
  <div>
    <el-carousel :interval="4000" type="card">
      <el-carousel-item v-for="(imgUrl, index) in imgUrls" :key="index">
        <img :src="imgUrl" alt="轮播图">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
const imgUrls = [
  './src/assets/elder1.png',
  './src/assets/elder2.png',
  './src/assets/elder3.png'
];
</script>

<style scoped>
.carousel-container {
  display: flex;
  justify-content: center;
  /* 水平居中轮播图 */
  margin: 0 auto;
}

.el-carousel {
  height: 100%;
  /* 高度自适应 */
  width: auto;
  /* 宽度自适应 */
}

.carousel-item-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.carousel-image {
  display: block;
  max-height: 800px;
  /* 限制最大高度，避免过高 */
  width: max-content;
  /* 宽度自适应，保持原始比例 */
}

/* 响应式调整 */
@media (max-width: 768px) {
  .carousel-image {
    max-height: 400px;
  }
}
</style>